<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title></title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/plugins/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/plugins/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="${pageContext.request.contextPath}/plugins/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}/plugins/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/plugins/css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        #books img{
            width: 50px;
            height: 50px;
        }
    </style>

</head>

<body class="gray-bg" id="bod">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <button type="button"  data-toggle="modal" data-target="#myModalee" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="ibox-content" id="books">

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th >用户店铺点评图片id</th>
                            <th >点评id</th>
                            <th >小图</th>
                            <th >大图</th>
                            <th >评论时间</th>
                            <%--<th >状态</th>--%>
                            <th >操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${!empty info}">
                        <c:forEach items="${info}" var="b">
                            <tr>
                                <td data-field="id">${b.id}</td>
                                <td data-field="id">${b.commId}</td>
                                <td data-field="name">${b.small}</td>
                                <td data-field="sex">${b.big}</td>
                                <td data-field="dept">${b.createtime}</td>
                                <%--<td data-field="dept">${b.status}</td>--%>
                                <td style="text-align: center;">
                                    <button class="btn " onclick="selOne(${b.id})" data-toggle="modal" data-target="#myModale" >详情</button>
                                    <button class="btn " data-toggle="modal" data-target="#myModal" onclick="updOne(${b.id})">编辑</button>
                                    <button class="btn " onclick="deleteOne(${b.id})">删除</button>
                                </td>
                            </tr>
                        </c:forEach>
                        </c:if>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModale" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">详情信息</h4>
            </div>
            <div class="modal-body">

                <table class="table table-bordered">
                    <tbody>

                    <tr>
                        <td>用户店铺点评图片id</td>
                        <td id="q"></td>
                        <td>点评id</td>
                        <td id="w"></td>
                        <td>小图</td>
                        <td id="e"></td>
                    </tr>
                    <tr>
                        <td>大图</td>
                        <td id="r"></td>
                        <td>评论时间</td>
                        <td id="t"></td>
                    </tr>
                    <%--<tr>--%>
                        <%--<td>状态</td>--%>
                        <%--<td id="i"></td>--%>
                    <%--</tr>--%>
                    </tbody>
                </table>


            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="updformdata">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td>用户id</td>
                            <td><input type="text" id="a" name="id"> </td>
                            <td>点评id</td>
                            <td ><input type="text" id="s" name="commId"> </td>

                        </tr>
                        <tr>
                            <td>小图</td>
                            <td ><input type="text" id="d" name="small"/></td>
                            <td>大图</td>
                            <td ><input type="text" id="f" name="big"> </td>
                        </tr>
                        <tr>
                            <td>评论时间</td>
                            <td ><input type="text" id="g" name="createtime" /></td>
                        </tr>
                        <%--<tr>--%>
                            <%--<td>状态</td>--%>
                            <%--<td colspan="3"><textarea id="l" name="status" style="width: 400px"></textarea> </td>--%>
                        <%--</tr>--%>
                        </tbody>
                    </table>
                    <button  class="btn-block" type="button" onclick="submm()">提交</button>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="modal fade" id="myModalee" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">插入数据</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="intformdata">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td>用户id</td>
                            <td><input type="text" id="z" name="id"> </td>
                            <td>点评id</td>
                            <td ><input type="text" id="x" name="commId"> </td>

                        </tr>
                        <tr>
                            <td>小图</td>
                            <td ><input type="text" id="c" name="small"/></td>
                            <td>大图</td>
                            <td ><input type="text" id="v" name="big"> </td>
                        </tr>
                        <tr>
                            <td>评论时间</td>
                            <td ><input type="text" id="b" name="createtime" /></td>
                        </tr>
                        <%--<tr>--%>
                        <%--<td>状态</td>--%>
                        <%--<td colspan="3"><textarea id="l" name="status" style="width: 400px"></textarea> </td>--%>
                        <%--</tr>--%>
                        </tbody>
                    </table>
                    <button  class="btn-block" type="button" onclick="intOne()">提交</button>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 全局js -->
<script src="${pageContext.request.contextPath}/plugins/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/plugins/js/jquery.form.min.js"></script>

<script src="${path}/plugins/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- Data Tables -->
<script src="${path}/plugins/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${path}/plugins/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 自定义js -->
<script src="${path}/plugins/js/content.js?v=1.0.0"></script>


<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        $('.dataTables-example').dataTable();

        /* Init DataTables */
        var oTable = $('#editable').dataTable();

        /* Apply the jEditable handlers to the table */
        oTable.$('td').editable('../example_ajax.php', {
            "callback": function (sValue, y) {
                var aPos = oTable.fnGetPosition(this);
                oTable.fnUpdate(sValue, aPos[0], aPos[1]);
            },
            "submitdata": function (value, settings) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oTable.fnGetPosition(this)[2]
                };
            },

            "width": "90%",
            "height": "100%"
        });


    });
</script>

<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->
<script>

    function intOne() {
        var intformdata=$("#intformdata").serialize();
        console.log(intformdata);
        $.ajax({url:'${pageContext.request.contextPath}/groupCommentImg',
               type:"POST",
               data:intformdata,
               success:function (data) {
                        if(data.status==1)
                         window.location='${pageContext.request.contextPath}/groupCommentImg/backhome';
               }
        })
    }

    function deleteOne(id) {
        var i=confirm("确定删除吗？");
        if(i){
            $.ajax({url:'${pageContext.request.contextPath}/groupCommentImg/'+id,
                    type:"DELETE",
                    success:function (data) {
                            if(data.status==1)
                             window.location='${pageContext.request.contextPath}/groupCommentImg/backhome';
                         }
            })
        }
    }

    function selOne(id) {
        $.ajax({
            url:'${pageContext.request.contextPath}/groupCommentImg/'+id,
            type:"GET",
            success:function(data){
                console.log(data);
                if(data.status==1){
                   $("#q").html(data.data.id);
                    $("#w").html(data.data.commId);
                    $("#e").html(data.data.small);
                    $("#r").html(data.data.big);
                    $("#t").html(data.data.createtime);
//                    $("#o").html(data.data.status);
                }

            }

        })

    }

    function updOne(id) {
        $.ajax({
            url:'${pageContext.request.contextPath}/groupCommentImg/'+id,
            type:"GET",
            success:function(data){
                console.log(data);
                if(data.status==1){
                    $("#a").val(data.data.id);
                    $("#s").val(data.data.commId);
                    $("#d").val(data.data.small);
                    $("#f").val(data.data.big);
                    $("#g").val(data.data.createtime);
//                    $("#l").val(data.data.status);
                }
            }

        })

    }


    function submm() {
        var updformdata=$("#updformdata").serialize();
        console.log(updformdata);
        $.ajax({
            url:'${pageContext.request.contextPath}/groupCommentImg',
            type:"PUT",
            data:updformdata,
            success:function(data){
                console.log(data);
                if(data.status==1)
                window.location='${pageContext.request.contextPath}/groupCommentImg/backhome';
            }
        })

    }
</script>
</body>

</html>
